<template>
  <div>
    <div class="main">
      <!--login-profile-->
      <div class="login-form">
        <div class="banner">
          <div class="title">
            <div class="title-right" v-if="userInfo != null">
              <h3>
                {{
                  userInfo.identity == 1
                    ? "商品提供者，供应商"
                    : "商品购买者，零售商"
                }}
              </h3>
              <h4>{{ $store.getters.getAddress.city }}</h4>
            </div>
            <div v-if="userInfo == null">当前用户未登录</div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="banner-bottom">
          <div class="banner-bottom-left">
            <p>昨日成交</p>
            <h3 v-if="userInfo == null">登录查看昨日成交</h3>
            <h3 v-if="userInfo != null">
              {{ $store.getters.getYesterdayCount }}
            </h3>
          </div>
          <div class="banner-bottom-right" style="margin-top: 10%">
            <p>历史成交</p>
            <h3 v-if="userInfo == null">登录查看历史成交</h3>
            <h3 v-if="userInfo != null">
              {{ $store.getters.getHistoryCount }}
            </h3>
          </div>
          <div class="clear"></div>
        </div>
        <ul class="nav1">
          <li v-if="userInfo != null">
            <el-button type="success" @click="upUserInfo">修改密码</el-button>
          </li>
          <li v-if="userInfo != null">
            <el-button type="info" @click="logout">退出登录</el-button>
          </li>
          <li v-if="userInfo == null">
            <el-button type="success" @click="login">立即登录</el-button>
          </li>
        </ul>
      </div>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogFormVisible"
        append-to-body
        width="35%"
      >
        <el-form :model="form">
          <el-form-item label="验证码">
            <el-input
              placeholder="请输入内容"
              v-model="form.keyWord"
              class="input-with-select"
            >
              <el-button slot="append" @click="getKey" :disabled="disable">{{
                msg
              }}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="form.password"
              autocomplete="off"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码">
            <el-input
              v-model="form.rePassword"
              autocomplete="off"
              type="password"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getOrderCount } from "@/api/orderApi.js";
import UpUserInfo from "@/components/UpUserInfo";
import { getCode } from "@/api/aliyunApi";
import { updatePassword } from "@/api/userApi";
export default {
  components: {
    UpUserInfo,
  },
  props: {
    userInfo: {
      type: Object,
    },
  },
  computed: {
    disable() {
      return this.isDisabled;
    },
    msg() {
      return this.time > 0 ? this.time + "秒后可重新获取" : "获取验证码";
    },
  },
  data() {
    return {
      upStatus: false,
      time: 0,
      dialogFormVisible: false,
      form: {
        password: "",
        rePasword: "",
        keyWord: "",
        phone: "",
      },
      isDisabled: false,
    };
  },
  mounted() {
    if (this.userInfo != null) {
      getOrderCount().then((res) => {
        this.$store.commit("setHistoryCount", res.data.historyCount);
        this.$store.commit("setYesterdayCount", res.data.yesterdayCount);
      });
    }
  },
  methods: {
    update() {
      if (this.form.keyWord == "") {
        this.$message.error("未输入验证码");
      } else if (
        !(this.form.password.length >= 6 && this.form.password.length <= 16)
      ) {
        this.$message.error("密码长度在6-16范围内");
      } else if (this.form.password != this.form.rePassword) {
        this.$message.error("两次密码不一致");
      } else {
        layer.load();
        let userInfo = this.$store.getters.getUserInfo;
        this.form.phone = userInfo.phone;
        updatePassword(this.form).then((res) => {
          if (res.code == 0) {
            this.dialogFormVisible = false;
            this.$message.success("修改成功，请重新登录");
            this.$cookie.delete("token");
            this.$store.commit("setNavStatus", 0);
            this.$store.commit("setUsetInfo", null);
            this.$router.push("/");
          }
          else{
             this.$message.error(res.message);
          }
          layer.closeAll("loading")
        });
      }
    },
    getKey() {
      if (this.time > 0) {
        this.$message.warning(`${this.time}秒后可再次获取`);
      } else {
        let _self = this;
        let userInfo = this.$store.getters.getUserInfo;
        layer.load();
        getCode(userInfo.phone,2)
          .then((res) => {
            if (res.code == 0) {
              _self.isDisabled = true;
              _self.time = 119;
              let keyTime = setInterval(function () {
                if (_self.time == 0) {
                  _self.isDisabled = false;
                  window.clearInterval(keyTime);
                } else {
                  _self.time--;
                }
              }, 1000);
              this.$message.success("验证码已发送，两分钟内有效");
            } else {
              this.$message.error("获取验证码失败:" + res.message);
            }
            layer.closeAll("loading")
          })
          .catch((err) => {
            layer.closeAll("loading")
            this.$message.error("获取验证码失败:" + err);
          });
      }
    },
    upUserInfo() {
      this.dialogFormVisible = true;
    },
    login() {
      this.$router.push("/login");
    },
    logout() {
      this.$confirm("即将退出当前账号，是否继续, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$cookie.delete("token");
          this.$store.commit("setNavStatus", 0);
          this.$store.commit("setUsetInfo", null);
          this.$router.push("/");
          // location.reload();
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
// .main{
//     background-image: url('/images/banner1.jpg');
// }
.nav1 {
  // width: 500px;
  list-style: none;
}
li {
  margin-top: 2%;
}
.clear {
  margin-top: 25%;
}
</style>
